<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=0"
    />
    <title>京东-首页</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <!--版心-->
    <div class="jd_container">
      <!--顶部搜索-->
      <header class="jd_search">
        <div class="jd_search_box">
          <a href="#" class="icon_logo"></a>
          <form action="#">
            <span class="icon_search"></span>
            <input type="search" placeholder="迪迦" />
          </form>
          <a href="#" class="login">登录</a>
        </div>
      </header>
      <!--轮播图-->
      <div class="jd_banner">
        <ul class="clearfix">
          <li>
            <a href="#"><img src="images/l8.5221afc0.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/l1.66431406.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/l2.f0284593.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/l3.0de197a5.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/l4.de7d51ec.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/l5.9ffeff92.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/l6.c59e0de1.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/l7.9bbb3f54.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/l8.5221afc0.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/l1.66431406.jpg" alt="" /></a>
          </li>
        </ul>
        <ul>
          <li class="now"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <!--导航栏-->
      <nav class="jd_nav">
        <ul class="clearfix">
          <li>
            <a href="category.html"
              ><img src="images/nav1.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href="category.html"
              ><img src="images/nav2.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href="category.html"
              ><img src="images/nav3.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href="category.html"
              ><img src="images/nav4.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href="category.html"
              ><img src="images/nav5.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href="category.html"
              ><img src="images/nav6.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href="category.html"
              ><img src="images/nav7.png" alt="" />
              <p>分类</p></a
            >
          </li>
          <li>
            <a href="category.html"
              ><img src="images/nav8.png" alt="" />
              <p>分类</p></a
            >
          </li>
        </ul>
      </nav>
      <!--产品区块-->
      <div class="jd_product">
        <section class="jd_proBox">
          <div class="pro_tit nb">
            <div class="f_left">
              <span class="sk_icon"></span>
              <span class="sk_text">掌上秒杀</span>
              <div class="sk_time">
                <span>0</span>
                <span>0</span>
                <span>:</span>
                <span>0</span>
                <span>0</span>
                <span>:</span>
                <span>0</span>
                <span>0</span>
              </div>
            </div>
            <div class="f_right"><a href="#" class="m_r10">更多></a></div>
          </div>
          <div class="pro_con">
            <!--clearfix:清除浮动-->
            <ul class="sk_product clearfix">
              <li>
                <a href="#"
                  ><img src="images/detail01.3f7b2f03.jpg" alt=""
                /></a>
                <p class="now_price">￥10.00</p>
                <p class="old_price">￥100.00</p>
              </li>
              <li>
                <a href="#"
                  ><img src="images/detail02.b5039836.jpg" alt=""
                /></a>
                <p class="now_price">￥10.00</p>
                <p class="old_price">￥100.00</p>
              </li>
              <li>
                <a href="#"
                  ><img src="images/detail01.3f7b2f03.jpg" alt=""
                /></a>
                <p class="now_price">￥10.00</p>
                <p class="old_price">￥100.00</p>
              </li>
            </ul>
          </div>
        </section>
        <section class="jd_proBox">
          <div class="pro_tit"><h3>京东自营</h3></div>
          <div class="pro_con clearfix">
            <a href="#" class="w_p50 f_left b_right"
              ><img src="images/cp1.522e0248.jpg" alt=""
            /></a>
            <a href="#" class="w_p50 f_right b_bottom"
              ><img src="images/cp2.441d0c46.jpg" alt=""
            /></a>
            <a href="#" class="w_p50 f_right"
              ><img src="images/cp3.62957b3c.jpg" alt=""
            /></a>
          </div>
        </section>
        <section class="jd_proBox">
          <div class="pro_tit"><h3>京东超市</h3></div>
          <div class="pro_con clearfix">
            <a href="#" class="w_p50 f_right b_left"
              ><img src="images/cp4.90e349ff.jpg" alt=""
            /></a>
            <a href="#" class="w_p50 f_left b_bottom"
              ><img src="images/cp5.3e6f0bc7.jpg" alt=""
            /></a>
            <a href="#" class="w_p50 f_left"
              ><img src="images/cp6.dfdd5e42.jpg" alt=""
            /></a>
          </div>
        </section>
        <section class="jd_proBox">
          <div class="pro_tit"><h3>京东热门</h3></div>
          <div class="pro_con clearfix">
            <a href="#" class="w_p50 f_left b_right"
              ><img src="images/cp1.522e0248.jpg" alt=""
            /></a>
            <a href="#" class="w_p50 f_right b_bottom"
              ><img src="images/cp2.441d0c46.jpg" alt=""
            /></a>
            <a href="#" class="w_p50 f_right"
              ><img src="images/cp3.62957b3c.jpg" alt=""
            /></a>
          </div>
        </section>
      </div>
    </div>

    <script scr="js/common.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>
